<template>
	<layout-base>
		<crumb title="学员问答" :routes="crumb"></crumb>
		<pannel>
			<z-table>
				<thead>
					<tr>
						<th>问题</th>
						<th>提问者</th>
						<th>课程</th>
						<th>章节</th>
						<th>时间</th>
						<th>状态</th>
						<th width="140" style="text-align: right;">操作</th>
					</tr>
				</thead>
				<tbody>
					<template v-for="(v,i) in questions">
						<tr :key="v._id">
							<td><div class="line-1">【问】{{v.question}}</div></td>
							<td><div class="flex ai-center"><avatar class="avatar mr-10" :src="v.askerAvatar" :name="v.asker" sm></avatar><div class="line-1">{{v.asker}}</div></div></td>
							<td><div class="line-1">{{v.course}}</div></td>
							<td><div class="line-1">{{v.chapter}}</div></td>
							<td>{{v.createTime}}</td>
							<td><span :class="['status', 'bg-'+mapStatusStyle[v.status]]">{{mapStatus[v.status]}}</span></td>
							<td>
								<div class="flex jc-end">
									<span v-if="v.children" class="iconfont status bg-info mr-10 pointer" title="展开回答" @click="onExtend(i)">&#xe735;</span>
									<span class="iconfont status bg-danger pointer" @click="onDel('question', i)" title="删除">&#xe6f7;</span>
								</div>
							</td>
						</tr>
						<template v-for="(answer, j) in v.children">
							<tr v-if="v.active" :key="answer._id" class="answer-tr">
								<td colspan="6">
									<div class="line-1">
										【答】<avatar class="mr-5" :src="answer.answerAvatar" :name="answer.answer" sm></avatar><b>{{answer.answer}}:</b> {{answer.answerWord}}
									</div>
								</td>
								<td>
									<div class="flex jc-end">
										<span class="iconfont status bg-danger pointer" @click="onDel('answer', i, j)" title="删除">&#xe6f7;</span>
									</div>
								</td>
							</tr>
						</template>
					</template>
				</tbody>
			</z-table>
			<pages :total="50" @change="onChange"></pages>
		</pannel>
	</layout-base>
</template>

<script>
	export default{
		data(){
			return{
				crumb:[
					{label:'我的课程'}
				],
				questions:[
					{_id:1, active:false, question:'课程丰富吗？', asker:'路人甲', askerAvatar:'', course:'Photoshop', chapter:'第一章 基础操作 第一节 图层管理', createTime:'2019-06-30', status:'resolved', children:[
						{_id:4, answer:'回答者1', answerWord:'挺丰富的。', answerAvatar:''},
						{_id:5, answer:'回答者2', answerWord:'挺丰富的2。', answerAvatar:''}
					]},
					{_id:2, active:false, question:'课程丰富吗？', asker:'路人甲', askerAvatar:'', course:'Illustrator', chapter:'第二章 矢量图 第一节 绘制图标', createTime:'2019-06-30', status:'resolved', children:[
						{_id:4, answer:'回答者1', answerWord:'挺丰富的。', answerAvatar:''},
					]},
					{_id:3, active:false, question:'课程丰富吗？', asker:'路人甲', askerAvatar:'', course:'Illustrator', chapter:'第二章 矢量图 第一节 绘制图标', createTime:'2019-06-30', status:'unanswered'}
				],
				mapStatus:{
					'resolved':'已有人回答',
					'unanswered':'无人回答'
				},
				mapStatusStyle:{
					'resolved':'success',
					'unanswered':'danger'
				}
			}
		},
		methods:{
			onChange(e){
				console.log(e)
			},
			onDel(type, i, j){
				if(type==='question')
					this.$Confirm({
						title: `确认删除 [${this.questions[i].asker}] 的问题吗`,
						content: '问题及其回答将被删除且无法恢复，请谨慎操作！',
						onConfirm(){
							console.log(i)
						}
					})
				else
					this.$Confirm({
						title: `确认删除 [${this.questions[i].children[j].answer}] 的回答吗`,
						content: '删除后无法恢复，请谨慎操作！',
						onConfirm(){
							console.log(i)
						}
					})
			},
			onExtend(i){
				this.questions[i].active = !this.questions[i].active
			}
		}
	}
</script>

<style lang="scss">
.answer-tr{
	background: #f9f9f9;
}
</style>
